import { addAtlas, AtlasApi, modifyAtlas } from '@/api/premium/content/atlas'
import {
  AddAtlasRequest,
  AtlasItem,
  ModifyAtlasRequest,
} from '@/api/premium/content/model/atlasModel'
import { useStore } from '@/store'
import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'
import { computed, reactive } from 'vue'
import { DialogFormState, DialogState } from '../types'

const useModifyAtlas = (searchListApi: AsyncFun) => {
  const store = useStore()
  const initFormState: DialogFormState = {
    id: undefined,
    name: '',
    description: '',
    imgUrl: '',
    bannerUrl: '',
    type: 1,
    itype: 99,
    isShow: 0,
    tags: [],
  }

  const dialogState = reactive<DialogState>({
    visible: false,
    title: '添加图集',
    type: 'add',
    formState: cloneDeep(initFormState),
  })

  /**
   * 操作图集弹框确认
   */
  const handleOk = async () => {
    if (dialogState.type === 'edit') {
      await modifyAtlasItem()
    } else if (dialogState.type === 'add') {
      await addAtlasItem()
    }
    dialogState.visible = false
    await searchListApi()
    dialogState.formState = cloneDeep(initFormState)
  }

  /**
   * 操作图集弹框退出
   */
  const cancelDialog = async () => {
    dialogState.formState = cloneDeep(initFormState)
  }

  /**
   * 打开操作图集的弹框
   *
   * @param type 指定打开的弹窗类别
   * @param atlasItem 当前点击的图集
   */
  const openDialog = async (type: 'edit' | 'add', atlasItem?: AtlasItem) => {
    dialogState.visible = true
    dialogState.type = type
    switch (type) {
      case 'edit':
        dialogState.title = '编辑图集'
        if (atlasItem) {
          dialogState.formState.id = atlasItem.id
          dialogState.formState.name = atlasItem.name
          dialogState.formState.description = atlasItem.description
          dialogState.formState.imgUrl = atlasItem.imgUrl
          dialogState.formState.bannerUrl = atlasItem.bannerUrl
          dialogState.formState.type = atlasItem.type
          dialogState.formState.itype = atlasItem.itype
          dialogState.formState.isShow = atlasItem.isShow
          dialogState.formState.tags = atlasItem.tags || []
        }
        break
      case 'add':
        dialogState.title = '添加图集'
        dialogState.formState = cloneDeep(initFormState)
        break
    }
  }

  /**
   * 修改图集
   */
  const modifyAtlasItem = async () => {
    const reqData: ModifyAtlasRequest = {
      id: dialogState.formState.id || '',
      name: dialogState.formState.name,
      description: dialogState.formState.description,
      imgUrl: dialogState.formState.imgUrl,
      bannerUrl: dialogState.formState.bannerUrl,
      type: dialogState.formState.type,
      itype: dialogState.formState.itype,
      isShow: dialogState.formState.isShow,
      tags: dialogState.formState.tags.join(','),
    }
    await modifyAtlas(reqData)
    message.success('修改成功')
  }
  const modifyAtlasItemLoading = computed(() =>
    store.getters['global/isOpLoading'](AtlasApi.MODIFY_ATLAS)
  )

  /**
   * 添加图集
   */
  const addAtlasItem = async () => {
    const reqData: AddAtlasRequest = {
      name: dialogState.formState.name || '',
      description: dialogState.formState.description,
      imgUrl: dialogState.formState.imgUrl,
      bannerUrl: dialogState.formState.bannerUrl,
      type: dialogState.formState.type,
      itype: dialogState.formState.itype,
      isShow: dialogState.formState.isShow,
      tags: dialogState.formState.tags.join(','),
    }
    await addAtlas(reqData)
    message.success('添加成功')
  }
  const addAtlasItemLoading = computed(() =>
    store.getters['global/isOpLoading'](AtlasApi.ADD_ATLAS)
  )

  return {
    dialogState,
    initFormState,
    modifyAtlasItem,
    addAtlasItem,
    modifyAtlasItemLoading,
    handleOk,
    cancelDialog,
    openDialog,
    addAtlasItemLoading,
  }
}
export default useModifyAtlas
